<template>
  <div>
    <div class="contanier border_top">
      <div class="nav flex align-center">
        <div
          v-for="(item, index) in navList"
          :key="index"
          class="flex align-center"
          :class="nav_act == index ? 'active' : ''"
          @click="navclcik(index, item.path)"
        >{{ item.text }}</div>
      </div>
      <div class="mt-2 ml-2">
        <ul class="m-0 p-0 flex" @click="open">
          <li v-for="(n,m) in gsqyList" :key="m">
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">
                {{n.title}}
              </h3>
              <div class="mt-1">{{n.name}}</div>
              <p>{{n.content}}</p>
            </div>
          </li>
          <!-- <li>
            <img src="../../../assets/img/gsqy2.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">太原华润煤业有限公司</h3>
              <div class="mt-1">煤炭</div>
              <p>太原华润煤业有限公司是华润集团旗下华润电力控股有限公司的下属企业，公司为有限责任公司，坐落于山西省古交市，现拥有叁座煤矿(原相煤矿、中社煤矿、红崖头煤矿)、两座洗煤厂（第一洗煤厂、第二洗煤厂）、两座焦化厂（第一焦化厂、第二焦化厂）和一座热电厂、一个铁路发运站、一个汽运队。煤炭产能为225万吨/年，原煤入洗能力为600万吨/年，发电量为1.5亿Kwh/年，铁路发运及汽运吞吐能力均为500万吨/年。 太原华润煤业有限公司将依托现有的煤、焦、化、电循环产业链，凭借华润集团先进的管理文化、高效的管理团队、强大的技术优势和雄厚的经济实力，在古交地方建设一个全国最好的煤、焦、化、电、煤层气综合利用循环经济工业园区，在企业发展壮大的过程中，带动和促进古交经济的长足发展。</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">山西古交西山义城煤业有限责任公司</h3>
              <div class="mt-1">煤炭开采</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：矿产资源开采：煤炭开采、洗选加工、销售，煤制品贸易；机械设备、五金产品批发零售；铁路货物运输、道路货物运输。</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">山西西山蓝焰煤层气有限责任公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为电力、热力、燃气及水生产和供应业，经营范围包含：煤层气(煤矿瓦斯）地面开采、煤矿瓦斯治理技术咨询及服务（依法须经批准的项目，经相关部门批准后方可开展经营活动）。</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">山西兴能发电有限责任公司</h3>
              <div class="mt-1">电力热力</div>
              <p>山西兴能发电有限责任公司，由全国着名的焦煤企业--山西焦煤集团公司控股的西山煤电股份有限公司和山西电力公司控股的山西和信电力发展有限公司合资成立，主要负责古交发电厂项目的建设和运营。古交发电厂项目是全国大型的燃用洗中煤坑口电厂之一，规划装机容量为300万千瓦，</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市三江煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：洗煤生产、销售；焦炭、煤制品、中煤、煤泥销售；通过铁路经销煤炭；码头装卸搬运货物、港口物资储运（仅限分支机构经营）；铁路运输：铁路集装箱运输服务。</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市太阳神煤炭实业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>企业地址位于古交市邢家社乡中社，所属行业为批发业，经营范围包含：加工、销售精煤；销售中煤、煤矸石</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">山西华润煤业有限公司</h3>
              <div class="mt-1">煤炭</div>
              <p>企业地址位于太原市小店区长治路西巷4号，所属行业为商务服务业，经营范围包含：以自有资金：为煤炭行业投资并提供相关的咨询与管理服务；经销矿用机械设备、煤制品、五金；矿产资源开采：煤炭开采（仅限分支机构经营）。</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市福明洗煤有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：中煤、煤泥销售；精煤加工、销售；焦炭销售</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">山西华润鸿福煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：煤炭开采。</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li>
          <li>
            <img src="../../../assets/img/gsqy1.png" alt />
            <div class="ml-1 mr-1">
              <h3 class="m-0 p-0">古交市嘉亿煤业有限公司</h3>
              <div class="mt-1">电力热力</div>
              <p>所属行业为煤炭开采和洗选业，经营范围包含：精煤加工、销售；煤炭附产品销售；道路货物运输；装卸服务</p>
            </div>
          </li> -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script >
export default {
  name: "indexProduct",
  components: {},
  data() {
    return {
      navList: [
        {
          path: "/",
          text: "规上企业",
        },
      ],
      nav_act: 0,
      gsqyList: [],
      currentPage: "1",
      pageSize: "10",
      state: "2",
    };
  },
  mounted() {
    this.getlbt();
  },
  methods: {
    navclcik(index, path) {
      this.nav_act = index;
    },
    open() {
      let routeData = this.$router.resolve({
        path: "/knowXq",
        query: { id: 1 },
      });
      window.open(routeData.href, "_blank");
    },
    getlbt() {
      this.$api
        .getljlbt(
          {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            state: this.state,
          }
        )
        .then((res) => {
          this.gsqyList = res.data.data.list
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="stylus" scoped>
.contanier {
  width: 1200px;
  height: 480px;
  background: #FFFFFF;
  margin-top: 25px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.nav {
  position: relative;
}

.nav>div {
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #BF242A;
  padding: 0 20px;
  cursor: pointer;
}

.nav>div.active {
  color: #ffffff;
  border-color: #ffffff;
  background: #EB424C;
  // border-image: -webkit-linear-gradient(to right, #00036B, #409EFF) 30 30;
  // border-image: -moz-linear-gradient(to right, #00036B, #409EFF) 30 30;
  // border-image: linear-gradient(to right, #00036B, #409EFF) 30 30;
}

ul {
  overflow: auto;

  li {
    list-style: none;
    width: 346px;
    height: 400px;
    background: #FFFFFF;
    box-shadow: 0px 0px 13px 0px rgba(127, 127, 127, 0.14);
    margin-right: 30px;
  }

  h3 {
    font-size: 26px;
    font-weight: 600;
    color: #333333;
  }

  div {
    font-size: 14px;
    font-weight: 400;
    color: #5B5E66;
  }

  p {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 18px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
  }
}
</style>
